<template>
  <div id="process">
    <group>
      <cell
        is-link
        @click.native="toMainInfo"
      >
        <div
          slot="inline-desc"
          class="state">
          <p>理赔状态： <span style="color: #3691FF">{{currentStatusName}}</span></p>
          <p>订单编号：
            <span
              style="color: red"
            >{{waybillNo}}</span>
          </p>
        </div>
      </cell>
    </group>
    <card :header="{title:'进度跟踪'}">
      <timeline
        slot="content">
        <timeline-item
          :iconType="item.actionCode === 'FINISHED' ? iconStatus  : 'waiting' "
          v-for="(item, index) in compensate" :key="index">
          <div :class="[index === 0 ? 'recent' : '']">{{item.content}}
            <pre style="padding-left: 16px">{{item.memo}}</pre>
          </div>

          <div class="time" :class="[index === 0 ? 'recent' : '']">
            <p class="shijian">{{item.createAt.split(" ")[1].slice(0,5)}}</p>
            <p class="riqi">{{item.createAt.split(" ")[0].replace(/-/g,".")}}</p>
          </div>
        </timeline-item>
      </timeline>
    </card>
  </div>
</template>
<script>
  import {
    Group,
    Cell,
    Card
  } from 'vux'
  import Timeline from './timeline/timeline.vue'
  import TimelineItem from './timeline/timeline-item.vue'
  import axios from '../api/config'
  //import {} from  '../api/api'
  export default {
    components: {
      Group,
      Cell,
      Card,
      Timeline,
      TimelineItem
    },
    data () {
      return {
        //运单状态变量 xIcon
        //完成
        iconStatus: 'success-no-circle',
        waybillNo: '',
        compensate: [],
        currentStatusName: ''
      }
    },
    mounted(){
      this.waybillNo = this.$route.params.waybillNo
      this.getHistory()
    },
    watch: {
      '$route' (to, from) {
        this.waybillNo = this.$route.params.waybillNo
        this.getHistory()
      }
    },
    methods: {
      getHistory(){
        let url = `/claims/${this.waybillNo}/history`
        axios.get(url)
          .then(res => {
            console.log(res)
            this.compensate = res.data.data.history
            this.currentStatusName = res.data.data.currentStatusName
          })
          .catch(error => {

          })
      },
      toMainInfo(){
        this.$router.replace({
          name: 'info',
          params: this.$route.params
        })
      }
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  @borderColor: #bbbbbb;
  @hintColor: #adadad;
  @fontColor: #333333;


  #process {
    background-color:#e7e7e7;
    .weui-panel__hd:after{
      right: 15px;
    }
    .weui-cell_access .weui-cell__ft:after {
      height: 10px ;
      width: 10px ;
    }
    .weui-cells{
      margin-top: 0;
    }
    color: @hintColor;
    .vux-timeline-item-content {
      padding: 0 0 1.5rem 5.5rem;
    }
    .vux-timeline-item-head-first,
    .vux-timeline-item-head,
    .vux-timeline-item-tail {
      left: 4.5rem !important;
      transform: translateX(-50%) !important;
    }
    .vux-timeline-item-tail {
      width: 1px !important;
      background: @borderColor;
    }
    .recent {
      color: @fontColor
    }
    .state p{
      height: 28px;
      line-height: 28px;
    }
    h4 {
      color: @hintColor;
      font-size: 14px;
      font-weight: normal;
    }
    .time {
      position: absolute;
      left: 0;
      top: 0;
      width: 3.5rem;
      text-align: right;
      .shijian {
        font-size: 16px;
      }
      .riqi {
        font-size: 10px;
      }
    }
  }

</style>

